<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<link
	href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css"
	rel="stylesheet" type="text/css" />
<body>
  <table class="table-customize table-hover"
				border="1" style="border: 1px solid:    DDD;">
				<g:if test="${teams}">
					<thead>
						<tr>
							<g:sortableColumn property="teamName"
								title="${message(code:'team.teamName.label', default: 'Team Name') }" />
							<g:sortableColumn property="logo"
								title="${message(code: 'team.logo.label', default: 'Logo') }" />
							<g:sortableColumn property="mailGroup"
								title="${message(code: 'team.mail.label', default: 'Group Mail') }" />
							<g:sortableColumn property="edit"
								title="${message(code: 'default.editLabel', default: 'Edit') }" />
							<g:sortableColumn property="delete"
								title="${message(code: 'default.deleteLabel', default: 'Delete') }" />
						</tr>
					</thead>
					<tbody>


						<g:each in="${teams}" status="i" var="team">
							<tr class="${(i % 2) == 0 ? 'even': 'odd' }">
								<td><g:link action="myTeams" params="[teamId : team?.id ]"
										id="${team?.id}">
										${team?.teamName}
									</g:link> <%--		${fieldValue(bean: team, field: 'teamName') } --%></td>
								<td><g:link action="myTeams" params="[teamId: team?.id]"
										id="${team?.id}">
										<g:if test="${team?.logo}">
											<img width="50"
												src="${request.contextPath}/avatarImages/${fieldValue(bean: team, field: 'logo')}" />
										</g:if>
										<g:else>
											<img width="50" src="avatarImages/user.png" />
										</g:else>
									</g:link></td>
								<td>
									${fieldValue(bean: team, field: 'mailGroup')}
								</td>
<%--								<td><g:link class="editBtn" action="editTeam"--%>
<%--										id="${team?.id}" params="[teamId : team?.id]"></g:link></td>--%>
								<td><a id="ud-team-${team?.id}" href="#" class="editBtn"></a>
								</td>
								<td class="delete"><g:form method="post">
										<g:hiddenField name="teamId" value="${team?.id}" />
										<g:actionSubmit class="deleteBtn" action="deleteTeam"
											value="${message(code: 'default.button.delete.label', default: '')}"
											onclick="return confirm('${message(code: 'default.button.delete.confirm.message', default: 'Are you sure?')}');" />
									</g:form></td>
<%--								<td><a id="dl-team-${team?.id}" href="#" class="deleteBtn"><i--%>
<%--									class="icon-remove icon-white"></i></a>--%>
<%--								</td>--%>
							</tr>
						</g:each>
					</tbody>
				</g:if>
				<g:else>
					<div class="errors" role="status">
						${flash.message}
					</div>
				</g:else>
			</table>
<%--		<div class="pagination">--%>
<%--			<g:paginate total="${teamTotal}" controller="team" action ="listTeam" />			--%>
<%--		</div>--%>
	<%--UPDATE FORM --%>

		<div id="update_modal" class="modal hide fade" tabindex="-1" style="width: 850px; margin-left: -450px;"
			role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h3>Update Team</h3>
			</div>
			<div class="modal-body">
				<g:uploadForm name="myTeam2" controller="team" action="updateTeam">
				<g:hiddenField name="teamId" id="teamId2" />
				<table>
					<tr>
						<td>Logo</td>
						<td><input type="file" name="image" class="input-block-level"
						style="background-color: #fcfcfc; border: 1px solid #cccccc;" /></td>
					</tr>
					<tr>
						<td>Team Name (*): </td>
						<td><g:textField name="teamName" required  placeholder="Team Name"
						class="input-block-level" value="${team?.teamName}" /></td>
					</tr>
					<tr>
						<td>Group Mail (*)</td>
						<td><g:textField name="mailGroup" required placeholder="Mail Group"
						class="input-block-level" value="${team?.mailGroup}" /></td>
					</tr>
					<tr>
						<td>Description</td>
						<td><g:textArea name="description" placeholder="Description" value="${team?.description}" rows="5" cols="40" class="input-block-level"/></td>
					</tr>
					<tr>
						<td>Established Date</td>
						<td><g:datePicker name="establishedDate" precision="day" /></td>
					</tr>
					<tr>
						<td  colspan="2" align="center" style="padding-top: 5px;">
							<g:submitButton name="updateTeam" class="btn btn btn-primary"
						value="Update" />
							<input type="reset" value="Reset" class="btn btn btn-primary" />
						</td>						
					</tr>
				</table>
				
				</g:uploadForm>
			</div>
			<div class="modal-footer">
				<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			</div>
		</div>
	<script type="text/javascript">
		jQuery(document).ready(function(){
			$('a[id^="ud-team-"]').on("click", function(){
				teamId = $(this).attr("id").split("-")[2];			
				$.ajax({
					url: '${g.createLink(controller: 'team', action: 'getTeamInfo')}',
					dataType: 'json',
					data: {
						teamId: teamId
					},
					success: function(data){
						$("#teamId2").val(data.team.id);	
						$("#teamName").val(data.team.teamName);
						$("#mailGroup").val(data.team.mailGroup);
						$("#description").val(data.team.description);
						$("#establishedDate").val(data.team.establishedDate);
						}
					});
				
				$('#update_modal').modal("show");
				});
			
			});
			
	</script>
	
</body>
</html>